<template>
  <!-- 系统用户页面组件-->
  <div>
    <el-row class="currencyManage container">
      <el-col style="margin-right: 10px" class="content-left">
        <el-row class="handleBox">
          <el-col :span="18">
            <el-button @click="reassign()">确定</el-button>
            <el-button @click="close()">关闭</el-button>
          </el-col>
          <el-col :span="6">
            <div class="handleIconBox">
              <el-popover
                placement="left-start"
                trigger="click"
                popper-class="icon_porper"
              >
                <div class="search_porper">
                  <el-form
                    ref="searchForm"
                    :model="searchForm"
                    label-width="100px"
                    label-position="right"
                    size="mini"
                  >
                    <el-form-item label="用户名：">
                      <el-input
                        v-model="searchForm.userName"
                        style="width: 150px"
                      />
                    </el-form-item>
                    <el-form-item label="所属机构：" prop="orgId">
                      <el-tooltip
                        :content="searchOrgTip"
                        :disabled="!searchOrgTip"
                        placement="right-end"
                        class="item"
                      >
                        <el-cascader
                          ref="searchOrgTree"
                          v-model="searchForm.orgId"
                          clearable
                          filterable
                          :options="orgList"
                          :props="{
                            checkStrictly: true,
                            emitPath: false,
                            value: 'orgId',
                            label: 'orgName',
                          }"
                          :show-all-levels="false"
                          style="width: 150px"
                          @change="searchOrgHandle"
                        />
                      </el-tooltip>
                    </el-form-item>
                    <el-form-item label="角色：" prop="roleName">
                      <el-input
                        v-model="searchForm.roleName"
                        style="width: 150px"
                      />
                    </el-form-item>
                  </el-form>
                  <div style="text-align: center; padding: 10px">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="init()"
                    >查询</el-button>
                    <el-button
                      size="mini"
                      @click="
                        (searchForm.userName = ''),
                        (searchForm.orgId = ''),
                        (searchForm.roleName = '')
                      "
                    >重置</el-button>
                  </div>
                </div>
                <i slot="reference" class="iconfont icon-sousuo" title="搜索" />
              </el-popover>
              <el-popover
                placement="bottom"
                width="150"
                trigger="click"
                popper-class="icon_porper"
              >
                <div class="operation_checkbox">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox
                      v-for="item in textData"
                      :key="item.prop"
                      :label="item.label"
                    >{{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <i
                  slot="reference"
                  class="iconfont icon-liebiaoshezhi"
                  title="列表设置"
                />
              </el-popover>
            </div>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @row-click="authorizeFor"
          max-height="250px"
        >
          <el-table-column width="55" type="selection"  />
          <el-table-column
            v-if="columnState[0]"
            prop="userName"
            label="用户名"
          />
          <el-table-column
            v-if="columnState[1]"
            prop="realName"
            label="姓名 "
          />

          <el-table-column
            v-if="columnState[2]"
            prop="org.orgName"
            label="所属机构 "
          />
          <el-table-column
            v-if="columnState[3]"
            prop="useFlag"
            label="状态"
            :filter-method="(val, row) => row.useFlag === val"
            :filters="[
              { text: '启用', value: '1' },
              { text: '锁定', value: '0' },
            ]"
            align="left"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.useFlag == '1'">
                <i class="startState" />启用
              </div>
              <div v-else-if="scope.row.useFlag == '0'">
                <i class="unStartState" />锁定
              </div>
              <div v-else>
                {{ scope.row.useFlag }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :current-page="searchForm.page"
          :page-size="searchForm.size"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @refresh="init()"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { systemManage } from '@/api/index'
export default {
  components: {
  },
  data() {
    return {
      row: {},
      total: 0,
      addOrEdit: false, // 新增/编辑/查看弹窗import
      isModuleData: false, // 同步模块数据弹窗
      // 机构树
      orgList: [
        {
          value: '01',
          label: '一级机构',
          children: [{ value: '001', label: '二级机构' }]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // search机构树悬停提示
      searchOrgTip: '',
      // save表单机构树悬停提示
      saveOrgTip: '',
      searchForm: {
        userName: '',
        orgId: '',
        roleId: '',
        page: 1,
        size: 15
      },
      saveForm: {},

      checkList: [],
      // 列隐藏
      textData: [
        { label: '用户名' },
        { label: '姓名' },
        { label: '所属机构' },
        { label: '状态' }
      ],
      // 获取table的数据
      tableData: [
      ]
    }
  },
  computed: {
    columnState() {
      const arr = []
      const arr1 = this.textData
      const arr2 = this.checkList
      for (let i = 0; i < arr1.length; i++) {
        let flg = false
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true
          }
        }
        arr.push(flg)
      }
      return arr
    }
  },
  watch: {},
  created() {
    this.checkListInit()
  },
  mounted() {
  },
  methods: {
    // 处理搜索机构框点击选中隐藏,鼠标悬停提示
    searchOrgHandle() {
      this.$refs.searchOrgTree.dropDownVisible = false
      const node = this.$refs.searchOrgTree.getCheckedNodes()
      if (node.length !== 0) {
        this.searchOrgTip = node[0].label
      } else {
        this.searchOrgTip = ''
      }
    },
    checkListInit() {
      this.checkList = this.textData.map((v) => {
        return v.label
      })
    },
    init(row) {
      this.row = row
      const data = this.searchForm
      systemManage
        .queryUser(data)
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.datas.rows
            this.total = res.datas.total
          }
        })
    },
    getOrgList() {
      systemManage.getOrganTree().then((res) => {
        this.orgList = res
      })
    },

    // 任务改派
    addFunc() {
      this.saveFlg = 1
      for (const k in this.saveForm) {
        this.saveForm[k] = ''
      }
      this.addOrEdit = true
    },
    editFunc() {
      this.saveFlg = 2
      const selection = this.$refs.multipleTable.selection
      if (selection.length !== 1) {
        return this.$message.warning('请选择一条数据进行修改')
      }
      const row = selection[0]
      const form = { ...row }
      this.saveForm = form
      this.addOrEdit = true
    },
    reassign() {
      const selection = this.$refs.multipleTable.selection
      if (selection.length !== 1) {
        return this.$message.warning('请选择一条数据')
      }
      if (this.row.id) {
        if (this.row.id === '0') {
          this.$emit('sPrincipalUser', selection[0])
        }
        if (this.row.id === '1') {
          this.$emit('sAgentUser', selection[0])
        }
        if (this.row.id === '2') {
          this.$emit('principalUser', selection[0])
        }
        if (this.row.id === '3') {
          this.$emit('agentUser', selection[0])
        }
      } else {
        this.$emit('approvered', selection[0])
      }

      //
    },
    close() {
      this.$emit('reassignClose', '')
    },
    // 点击表格右侧显示为xx授权
    authorizeFor(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection()
      }
      this.$refs.multipleTable.toggleRowSelection(row, true)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.searchForm.size = val
      this.init()
    },
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 380px;
  margin-bottom: 20px;
  .tableTop {
    margin-bottom: 20px;
  }
  h3 {
    line-height: 30px;
  }
}
</style>
